<template>
    <view class="container">
        <view class="back-move-top" v-if="show"></view>
        <u-popup v-model="show" mode="center" border-radius="10" :mask-close-able="false">
            <view class="u-rela background">
                <view class="content">
                    <view class="u-text-center title u-m-b-20">{{appName}}  V{{version}}更新</view>
                    <scroll-view scroll-y class="scroll-view" v-if="showLog">
                        <zero-markdown-view themeColor="#333" :markdown="content" v-if="content"></zero-markdown-view>
                    </scroll-view>
                </view>
                <view v-if="showLine" class="outer-process">
                    <u-line-progress :percent="percent" active-color="#FC4F75" striped striped-active/>
                </view>
                <view class="btn-area u-abso">
                    <u-button type="p" @click="update" v-if="!showLine">立即升级</u-button>
                    <u-button type="p" @click="install" v-if="tempFilePath">安装</u-button>
                    <u-button type="p" @click="cancelUpdate" v-if="showLine && !downloadOK">取消</u-button>
                    <u-button type="d" v-if="needUpdate === 0" @click="ignoreUpdate">跳过</u-button>
                </view>
            </view>
        </u-popup>
        <u-popup v-model="showProcess" mode="center" border-radius="10" :mask-close-able="false">
            <view class="wraper">
                <u-image src="../static/update.png" width="577" height="456"></u-image>
                <u-line-progress :percent="percent" active-color="#FC4F75" striped striped-active class="process">
                </u-line-progress>
                <view class="tips">版本努力更新中, 请稍后...</view>
            </view>
        </u-popup>
    </view>
</template>

<script>
// 引入项目 全局 配置
import { config, BASE_URL } from '@/config/config.js'
// 引入 版本比对 方法
import { VersionCheck } from '../functions'

export default {
    data() {
        return {
            show: false,
            version: '',
            showLog: false, // 显示升级日志
            showLine: false, // 显示进度条
            tempFilePath: null,
            needUpdate: false, // 是否强制升级
            showProcess: false, // 补丁升级 弹窗
            percent: 0,
            content: '',
            type: undefined, // 升级处理方式 0： 整包升级  1： 热更新  2： 应用市场跳转
            url: undefined,
            downloadOK: false, // 安装包下载完成标志
        };
    },
    computed:{
        appName(){
            return config.appName
        }
    },
    created() {
        // #ifdef APP-PLUS
        let os = uni.getSystemInfoSync().platform
        var appType = os == 'ios' ? 2 : 1
        uni.request({
            url: BASE_URL + '/base/app/version',
            data: {
                appUserType: config.appUserType,  // 超凡云仓APP  wms 固定传2
                appType: appType,  // 安卓 1  ios 2
                appModel: config.appModel,    // 超凡云仓APP  固定传1  wms: 3
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded'
            },
            method: 'POST',
            success: ({ data }) => {
                console.log(data)
				const res = data.data
                // 如果没有返回版本信息  则直接进入
                if (!data.data) return this.ignoreUpdate()

                this.version = res.version
                this.showLog = res.showLog
				this.content = res.content
                this.needUpdate = res.needUpdate
				let localVersion
                plus.runtime.getProperty(plus.runtime.appid, WGTinfo => {
                    localVersion = WGTinfo.version || plus.runtime.version
                    // 如果有版本更新
                    if(VersionCheck(res.version, localVersion)){
                        this.show = true
                        // 如果是整包升级 没有补丁 的情况下
                        if (res.androidUrl && !res.wgtUrl){
                            if (os === 'ios') {
                                console.log('当前为ios平台，并且为整包升级！需要跳转AppStore 升级成最新版本');
                                this.type = 2;
                            }
                            if (os === 'android') {
                                console.log('您的版本太低了,需要下载最新的完整APK')
                                this.url = res.androidUrl;
                                this.type = 0;
                            }
                            return
                        }

                        // 如果  有补丁升级  需要确认是否有最小升级版本 要求
                        if (res.minVersion && VersionCheck(res.minVersion, localVersion)){
                            // 1. 首先比对 本地版本  与最低版本号
                            // 如果低于最低版本号  需要整包更新
                            if (os === 'ios') {
                                console.log('当前为ios平台，并且为整包升级！需要跳转AppStore 升级成最新版本');
                                this.type = 2;
                            }
                            if (os === 'android' && res.androidUrl) {
                                console.log('您的版本太低了,需要下载最新的完整APK')
                                this.url = res.androidUrl;
                                this.type = 0;
                            }
                        } else {
                            // 没有最小版本验证  可以直接使用补丁升级
                            this.url = res.wgtUrl;
                            this.type = 1;
                        }
                    }else{
                        this.ignoreUpdate()
                    }
                })
            },
            fail: (error) => {
                console.log(error)
                uni.navigateTo({ url: '/uni_modules/sc-appVersionCheck/pages/403' })
            }
        })
        // #endif

        // #ifdef H5
        this.ignoreUpdate()
        // #endif
    },
    methods:{
        ignoreUpdate(){
            // 检查 缓存
            uni.getStorage({
                key: config.tokenName,
                success: ({data}) => {
                    // 如果缓存存在  则调用token 登录  刷新token时间
                    if(data){
                        this.$store.dispatch('LoginAuto').then(()=>{
                            // 自动登陆成功 跳转home
                            uni.reLaunch({ url: config.homeUrl })
                        }).catch(err=>{
                            console.log(err, '自动登陆失败')
                            uni.reLaunch({ url: config.loginUrl })
                        })
                    }else{
                        uni.reLaunch({ url: config.loginUrl })
                        console.log(data, '本地缓存读取异常, 检查代码')
                    }
                },
                fail: (err) => {
                    console.log(err)
                    // 没有缓存时  跳转登录页面
                    uni.reLaunch({ url: config.loginUrl })
                }
            })
        },
        update() {
            switch(this.type){
                // 整包安装  android
                case 0:
                    this.showLine = true
                    this.downloadTask = uni.downloadFile({
                        url: this.url,
                        success: downloadResult => {
                            if (downloadResult.statusCode === 200) {
                                this.downloadOK = true
                                this.tempFilePath = downloadResult.tempFilePath
                            }
                        }
                    });
                    this.downloadTask.onProgressUpdate(res => {
                        this.percent = res.progress;
                    });
                    break
                case 1:
                    this.updateWithPatch();
                    break
                case 2:
                    let appUrl = config.iosUrl;
                    plus.runtime.openURL(appUrl);
                    break
                default:
                    break
            }
        },
        // 资源包热更新
        updateWithPatch(){
            this.show = false // 关闭升级日志弹窗
            this.showProcess = true; // 显示补丁升级 弹窗
            this.downloadTask = uni.downloadFile({
                url: this.url,
                success: downloadResult => {
                    if (downloadResult.statusCode === 200) {
                        console.log('下载升级包完成, 开始安装')
                        plus.runtime.install(
                            downloadResult.tempFilePath,
                            {
                                force: false
                            },
                            () => {
                                console.log('install success...');
                                plus.runtime.restart();
                            },
                            (e) => {
                                this.$u.toast(e.message, 3000)
                                console.error('install fail...', e);
                                setTimeout(()=>{
                                    plus.runtime.quit()
                                },3000)
                            }
                        );
                    }
                }
            });
            this.downloadTask.onProgressUpdate(res => {
                this.percent = res.progress;
            });
        },
        cancelUpdate() {
            let msg = this.needUpdate == 1 ? '取消升级之后将无法使用APP，是否确认？' : '取消升级之后可能会影响用户体验，确认暂不升级？'
            this.$showModal({
                content: msg,
                success: res=>{
                    if(res.confirm){
                        this.downloadTask.abort();
                        this.$u.toast('已取消更新!');
                        setTimeout(() => {
                            this.needUpdate == 1 ? plus.runtime.quit() : this.enter();
                        }, 1500);
                    }
                }
            })
        },
        install(){
            plus.runtime.install(
                this.tempFilePath, {
                    force: false
                },
                () => {
                    console.log('install success...')
                    plus.runtime.restart()
                },
                () => {
                    console.error('install fail...');
                    // 需要强制更新，更新失败强制退出
                    this.$u.toast('出现异常,即将退出!');
                    setTimeout(()=>{
                        plus.runtime.quit()
                    },3000)
                }
            );
        },
    }
}
</script>

<style lang="scss">
// page{
//     background: transparent;
// }

.container {
    height: 100vh;
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    /deep/ .u-mode-center-box {
        background-color: transparent;
    }

    .background {
        background-image: url(../static/newVersion.png);
        background-size: 650rpx 941rpx;
        width: 650rpx;
        height: 941rpx;
        padding-top: 320rpx;
    }

    .content {
        padding: 0 30rpx;
        max-width: 650rpx;
        padding-bottom: 20rpx;
    }

    .btn-area {
        bottom: 40rpx;
        display: flex;
        justify-content: space-around;
        padding-bottom: 20rpx;
        width: 650rpx;

        &>button {
            width: 30%;
        }
    }

    .wraper {
        position: relative;

        .process {
            position: absolute;
            width: 90%;
            left: 5%;
            bottom: 100rpx;
        }

        .tips {
            position: absolute;
            bottom: 20rpx;
            left: 0;
            text-align: center;
            width: 100%;
            color: #999999;
        }
    }

    .title {
        font-size: 40rpx;
        font-weight: bold;
        letter-spacing: 2prx;
    }

    .scroll-view {
        height: 400rpx;
    }
}

.back-move-top {
    background: url(../static/login.jpg);
    background-size: 100% auto;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 10000px;
    animation: back_move_top 600s linear infinite;
}

@keyframes back_move_top {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-10000px);
    }
}

.outer-process {
    position: absolute;
    bottom: 172rpx;
    width: calc(100% - 60rpx);
    margin-left: 30rpx;
}
</style>
